<template>
	<m-block bgColor="#f5f5f5" radius="0" gap="0 24" class="screen flex-between">
		<view class="left flex">
			<view :class="{ active: sort == 0 }" @click="$emit('setType', 0)"><text>默认排序</text></view>
			<view :class="{ active: [1, 2].indexOf(sort) != -1 }" @click="$emit('setType', sort == 1 ? 2 : 1)">
				<text>价格</text>
				<template v-if="[1, 2].indexOf(sort) == -1">
					<m-icon size="28" spa="0 0 0 10" :size="[19, 22]" type="sort1-0" />
				</template>
				<template v-else>
					<m-icon size="28" spa="0 0 0 10" :size="[19, 22]" :type="sort == 1 ? 'sort1-2' : 'sort1-1'" />
				</template>
			</view>
			<view :class="{ active: sort == 3 }" @click="$emit('setType', 3)"><text>销量</text></view>
			<!-- <view :class="{ active: sort == 4 }" @click="$emit('setType', 4)"><text>评论数量</text></view> -->
			<view :class="{ active: sort == 5 }" @click="$emit('setType', 5)"><text>好评率</text></view>
			<view :class="{ active: sort == 6 }" @click="$emit('setType', 6)"><text>最新</text></view>
		</view>
		<view v-if="filterShow" class="right" @click="$refs.popup.open()" :class="{ 'active': selected }">
			<text>筛选</text>
			<m-icon size="24" type="icon-shaixuan1" :color="selected?'#fa2f43':'#333'" />
		</view>
		<!-- 条件筛选 -->
		<uni-popup ref="popup" type="bottom">
			<m-block class="popup-box flex-column" gap="22 24 0" radius="30 30 0 0">
				<view class="title-box flex-between">
					<text>全部筛选</text>
					<m-icon type="icon-guanbi1" size="36" @click="$refs.popup.close()" color="#333" />
				</view>
				<view class="cont-box">
					<!-- 商品属性 -->
					<view class="li" v-if="typeShow">
						<view class="li_title"><text>商品属性</text></view>
						<view class="li_block flex">
							<view class="tagList flex">
								<text :class="{ active: item.value }"
									@click="item.value = Number(!item.value);filterData()"
									v-for="(item,index) in tagList">{{item.name}}</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 区间价格 -->
				<view class="li" v-if="priceShow">
					<view class="li_title"><text>价格区间(元)</text></view>
					<view class="li_block flex">
						<view class="price_began prcie"><input type="number" @input="click($event, 1)"
								v-model="price_began" placeholder="自定义最低价" /></view>
						<view class="linkPrice">—</view>
						<view class="price_end prcie"><input type="number" @input="click($event, 2)" v-model="price_end"
								placeholder="自定义最高价" /></view>
					</view>
				</view>
				</view>
				<view class="btn-box flex-between">
					<m-button class="btn1" :type="'primary'" @click="reSetFn()">重置</m-button>
					<m-button class="btn2" :type="'primary'" @click="confirmFn()">确定</m-button>
				</view>
			</m-block>
		</uni-popup>
	</m-block>
</template>

<script>
	export default {
		name: 'condition',
		data() {
			return {
				price_began: '', // 起始价格
				price_end: '', // 结束价格
				tagList: [{ // tag列表
						key: 'istop',
						value: 0,
						name: '推荐商品',
					},
					{
						key: 'isnew',
						value: 0,
						name: '商城新品',
					},
					{
						key: 'ishot',
						value: 0,
						name: '爆款商品',
					},
				]
			};
		},
		props: {
			sort: {
				default: () => {
					return 0; //  1单价倒序 2单价顺序 3销量 4评论数量 5好评率 6最新
				},
				type: Number
			},
			// 筛选  ---是否显示
			filterShow: {
				default: () => {
					return true;
				},
				type: Boolean
			},
			// 筛选面板---类型 是否显示
			typeShow: {
				default: () => {
					return true;
				},
				type: Boolean
			},
			// 筛选面板---价格区间 是否显示
			priceShow: {
				default: () => {
					return true;
				},
				type: Boolean
			}
		},
		computed: {
			selected() {
				let a = this.tagList.find((v) => {
					return v.value == true;
				})
				if (a || this.price_began || this.price_end) return true;
				return false;
			}
		},
		onLoad() {},
		onShow() {},
		methods: {
			// tagList 点击
			setItemFn(item) {
				item.value = Number(!item.value);
				this.filterData();
			},
			//重置操作
			reSetFn() {
				let a = this.tagList.find((v) => {
					return v.value == true;
				})
				if (!a && !this.price_began && !this.price_end) {
					this.$refs.popup.close();
					return
				}
				this.tagList.forEach(item => {
					item.value = Number(false);
				})
				this.price_began = '';
				this.price_end = '';
				this.filterData();
				this.$refs.popup.close();
			},
			// 确定操作
			confirmFn() {
				if (!this.price_began && !this.price_end) {
					this.$refs.popup.close();
					return;
				}
				this.filterData();
				this.$refs.popup.close();
			},
			filterData() {
				// 价格处理
				if (this.price_began && this.price_end && Number(this.price_began) > Number(this.price_end)) {
					[this.price_began, this.price_end] = [this.price_end, this.price_began];
				}
				const enumObj = this.arrObjGetEnum(this.tagList, 'key', 'value');
				// 数据组合
				let dataPrice = {
					...enumObj,
					price_began: Number(this.price_began),
					price_end: Number(this.price_end)
				};
				this.$emit('setPrice', dataPrice);
			},
			click(e, type) {
				// 只能输入数字的验证;
				const inputType = /[^\d]/g; //想限制什么类型在这里换换正则就可以了
				this.$nextTick(function() {
					if (type == 1) {
						this.price_began = event.target.value.replace(/\D/g, '');
					}
					if (type == 2) {
						this.price_end = event.target.value.replace(/\D/g, '');
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.screen {
		padding: 2rpx 24rpx;

		.left {
			flex: 1;

			&>view {
				padding-top: 24rpx;
				padding-bottom: 24rpx;
				padding-right: 48rpx;
				box-sizing: border-box;

				text {
					font-size: 27rpx;
					font-family: PingFang-SC-Regular-, PingFang-SC-Regular;
					font-weight: normal;
					color: #666666;
				}
			}
		}

		.active {
			text {
				color: #fa2f43 !important;
			}
		}

		.right {
			font-size: 27rpx;
			font-family: PingFang-SC-Regular-, PingFang-SC-Regular;
			font-weight: normal;
			color: #666666;
		}
	}

	.popup-box {
		.title-box {
			padding-bottom: 20rpx;

			&>text {
				font-size: 30rpx;
				color: #333;
			}
		}

		.cont-box {
			padding: 30rpx 0rpx 40rpx;
			flex: 1;
			overflow: auto;

			.li {
				padding-bottom: 40rpx;

				.li_title {
					&>text {
						font-size: 28rpx;
						color: #333;
						font-weight: bold;
					}
				}

				.li_block {
					padding-top: 30rpx;

					.prcie {
						background-color: #f7f7f7;
						border-radius: 80rpx;

						input {
							text-align: center;
							padding: 20rpx 36rpx;
							font-size: 26rpx;
							color: #333;
						}
					}

					.linkPrice {
						padding: 0rpx 16rpx;
						color: #ebebeb;
					}

					.price_began {}

					.price_end {}
				}

				.tagList {
					flex-wrap: wrap;

					&>text {
						border: 2rpx solid #f7f7f7;
						background-color: #f7f7f7;
						border-radius: 80rpx;
						padding: 16rpx 36rpx;
						font-size: 26rpx;
						margin-right: 30rpx;
						margin-bottom: 24rpx;
						display: inline-block;
					}

					.active {
						border: 2rpx solid #f5a6ad !important;
						background-color: #fff5f5 !important;
						color: #fa2f43 !important;
					}
				}
			}
		}

		.btn-box {
			border-top: 1rpx solid #eeeeee;
			text-align: center;
			padding: 26rpx 0;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;

			.m-button {
				flex: 1;
				padding: 20rpx 0;
			}

			.btn1 {
				background: #f4bf40 !important;
			}

			.m-button+.m-button {
				margin-left: 30rpx;
			}
		}
	}
</style>